<template>
  <view class="userInfo">
    <CommonHeader>个人信息</CommonHeader>
    <view class="content">
      <van-tabs
        :active="active"
        color="#419488"
        border="true"
        nav-class="nav-class"
        animated="true"
      >
        <!-- 个人信息填写页 -->
        <van-tab title="用户信息">
          <van-field
            :value="userInfo.userName"
            label="用户名"
            label-class="label-class"
            input-class="input-class"
            @change="userInfo.userName = $event.mp.detail"
            :disabled="ifReadonly"
          />
          <van-field
            :value="userInfo.sex"
            label="性别"
            label-class="label-class"
            input-class="input-class"
            @change="userInfo.sex = $event.mp.detail"
            @click-input="showSex"
            :disabled="ifReadonly"
            readonly
          />
          <van-field
            :value="userInfo.email"
            label="邮箱"
            label-class="label-class"
            input-class="input-class"
            @change="userInfo.email = $event.mp.detail"
            :disabled="ifReadonly"
          />
          <van-field
            :value="userInfo.IDCard"
            label="身份证"
            label-class="label-class"
            input-class="input-class"
            @change="userInfo.IDCard = $event.mp.detail"
            :disabled="ifReadonly"
          />
          <van-field
            :value="userInfo.graduationSchool"
            label="毕业院校"
            label-class="label-class"
            input-class="input-class"
            @change="userInfo.graduationSchool = $event.mp.detail"
            :disabled="ifReadonly"
          />
          <van-field
            :value="userInfo.birthday"
            label="生日"
            label-class="label-class"
            input-class="input-class"
            @change="userInfo.birthday = $event.mp.detail"
            @click-input="showBirthday"
            :disabled="ifReadonly"
            readonly
          />
          <view class="info-button">
            <van-button type="primary" size="large" @click="modifyUserinfo">
              {{ confirmInfo }}
            </van-button>
          </view>
        </van-tab>
        <!-- 岗位信息 -->
        <van-tab title="岗位信息">
          <van-field
            v-for="item in postInfoList"
            :key="item.id"
            :value="item.value"
            :label="item.label"
            label-class="label-class"
            input-class="input-class"
            @change="item.value = $event.mp.detail"
            disabled
          />
        </van-tab>
      </van-tabs>
    </view>
    <van-toast id="van-toast" />
    <van-dialog id="van-dialog" />
    <!-- 性别选择器 -->
    <van-popup
      :show="ifSexShow"
      position="bottom"
      custom-style="height: 30%;"
      @close="closeSex"
    >
      <van-picker
        show-toolbar
        visible-item-count="3"
        :columns="sexList"
        :default-index="Number($store.state.userInfo.sex)"
        toolbar-class="toolbar-class"
        column-class="column-class"
        @confirm="sexConfirm"
        @cancel="sexCancel"
      />
    </van-popup>
    <!-- 生日日期选择器 -->
    <van-popup
      :show="ifBirthdayShow"
      position="bottom"
      custom-style="height: 40%;"
      @close="closeBirthday"
    >
      <van-datetime-picker
        type="date"
        :value="datePicker.currentDate"
        :min-date="datePicker.minDate"
        :max-date="datePicker.maxDate"
        :formatter="formatter"
        @confirm="birthdayConfirm"
        @cancel="birthdayCancel"
      />
    </van-popup>
  </view>
</template>
<script src="./script.js"></script>
<style lang="less" src="./style.less"></style>
